﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../../../node_modules/@aspnet/signalr/dist/browser/signalr.min.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
        <input type="button" @click="connectButton" value="Connect" />
        <ul>
            <li v-for="msg in messages">
                {{ msg }}
            </li>
        </ul>
    </div>
    <script>
        // webpack 打包方式使用：var signalR = require('./signalr.min.js');
        Vue.prototype.$signalR = signalR;
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                connection: null,
                messages:[]
            },
            methods: {
                connectButton() {
                    this.connection = new this.$signalR.HubConnectionBuilder()
                        .withUrl("http://localhost:5000/alarmHub?access_token=test", signalR.HttpTransportType.WebSocket)
                        .configureLogging(this.$signalR.LogLevel.Error)
                        .build();
                    this.connection.start().catch(err => console.error(err.toString()));
                    this.connection.on('ReceiveMessage', data => {
                        this.messages.push(data);
                    });
                }
            },
            created: function () {
                // 初始化
                //this.connection = new this.$signalR.HubConnectionBuilder()
                //    .withUrl("http://localhost:5000/alarmHub?access_token=test", signalR.HttpTransportType.WebSocket)
                //    .configureLogging(this.$signalR.LogLevel.Error)
                //    .build();
            },
            mounted: function () {
                // 开始监听
                //this.connection.start().catch(err => console.error(err.toString()));
                //this.connection.on('ReceiveMessage', data => {

                //});
            }
        });
    </script>
</body>
</html>